<template>
  <div>
  	<!--start 头部-->
  	<!--<div class="sreePublic">
  		<div id="" style="text-align: center;">
  			<em class="iconfont" @click="$router.go(-1)">&#xe61f;</em>
  		</div>
			{{vue_header_title}}
  	</div>-->
  	<!--start 头部-->
  	<!--start content-->
  	<div class="content">
  		<div class="address rightIcon" @click="$router.push({path:'/deliverys'})">
	  			<div v-show="!vue_address_showAdd" class="contentDetail address_con">
	  				<p>{{vue_address_data.deliveryContact}}   {{vue_address_data.deliveryPhone | phone}}   <span v-show="vue_address_data.deliveryDefault=='1'" class="ico">默认</span></p>
	  				<p class="add_p">{{vue_address_data.deliveryArea}}{{vue_address_data.deliveryAddress}}</p>
	  			</div>
	  			<div class="address_noList" v-show="vue_address_showAdd">
	  				&nbsp;&nbsp;!&nbsp;&nbsp;请填写收货地址
	  			</div>
	  			<Icon type="chevron-right lookDetail"></Icon>
  		</div>
  		<div class="orderDetail">
  			<div class="goods rightIcon">
  				<template v-if="vue_goods_dataList.length!=1">
  					<div class="clearfix"  @click="$router.push({path:'/orderGoodsList'})">
  						<div class="bigImgWrap fl">
			  				<ul class="contentDetail clearfix" ref='bigImgUl'>
			  					<li class="fl" v-for="(item,index) in vue_goods_dataList">
			  						<img :src="item.goodsBigPic" width="100%" height="auto" alt="" />
			  					</li>
			  				</ul>
			  			</div>
			  			<div class="fr goodsNum font12">共{{countNum}}件</div>
	  					<Icon type="chevron-right lookDetail"></Icon>
	  				</div>
  				</template>
  				<template v-else>
  					<div class="goodsOnly clearfix">
							<div class="img fl">
		  					<img :src="vue_goods_dataList[0].goodsBigPic" width="100%" height="auto" alt="" />
		  				</div>
		  				<div class="detail fl">
		  					<p class="title">{{vue_goods_dataList[0].goodsName}}</p>
		  					<p class="spe">{{vue_goods_dataList[0].goodsSkuValue}}</p>
		  					<p class="pri">
		  						&yen; {{vue_goods_dataList[0].goodsBuyPrice.toFixed(2)}}
		  						<span class="fr">x {{vue_goods_dataList[0].goodsBuyNum}}</span>
		  					</p>
		  				</div>
						</div>
  				</template>
  			</div>
  			<div class="pay rightIcon">
  				<div class="contentDetail clearfix" @click="$router.push({path:'/orderPayType'})">
	  				<div class="fl">支付方式</div>
	  				<div class="fr font12">{{vue_pay_ddtypeText}}</div>
  				</div>
  				<Icon type="chevron-right lookDetail"></Icon>
  			</div>
  			<div class="transport">
  				 <div class="contentDetail clearfix">
	  				<div class="fl">配送方式</div>
	  				<div class="fr font12">包邮</div>
  				</div>
  			</div>
  		</div>
  		<div class="invoice rightIcon" @click="$router.push({path:'/invoiceInfo'})">
  			<div class="contentDetail clearfix">
	  				<div class="fl">发票</div>
	  				<div class="fr font12">{{vue_invoice_data.invoiceTypeName}}</div>
				</div>
				<Icon type="chevron-right lookDetail"></Icon>
  		</div>
  		<div class="remark clearfix">
				<div class="fl labelDiv">备注</div>
				<div class="fr valueDiv">
					<Input v-model="vue_remark_text" type="textarea" :autosize="{minRows: 3}" placeholder="请输入备注信息"></Input>
				</div>
  		</div>
  		<div class="sum">
  			<div class="goodsSum clearfix">
  				<span class="fl">商品金额</span>
  				<span class="fr" style="color:#D50B0A;">&yen;{{Public.formatMoney(countPric,2)}}</span>
  			</div>
  			<div class="transportSum clearfix">
  				<span class="fl">+运费</span>
  				<span class="fr" style="color:#D50B0A;">&yen;0.00</span>
  			</div>
  		</div>
  	</div>
  	<!--end content-->
  	<!--start footer-->
  	<div class="footer clearfix">
  		<div class="massge fl">
  			实付款： &yen;{{Public.formatMoney(countPric,2)}}
  		</div>
  		<div class="btn fr" @click="vFun_order_save">
  			提交订单
  		</div>
  	</div>
  	<!--end footer-->
  </div>
</template>

<script>
import { Toast } from 'mint-ui';  //引入弹框
import { MessageBox } from 'mint-ui';
export default {
  data () {
    return {
    	vue_header_title:'订单填写',  //头部title
    	vue_goods_dataList:[],  //选择的商品
    	vue_address_data:{
    		"deliveryContact":"",
    		"deliveryPhone":"",
    		"deliveryDefault":"",
    		"deliveryArea":"",
    		"deliveryAddress":"",
    		"deliveryCode":"",

    	},  //地址数据
    	vue_invoice_data:{  //地址数据
    		invoiceType:'0',
    		invoiceCode:'',
    		invoiceTitle:'',
    		invoiceContent:'',
    		invoiceTaxId:'',
    		invoiceAddress:'',
    		invoicePhone:'',
    		invoiceBank:'',
    		invoiceAccount:'',
    		invoiceTypeName:'不开发票'
    	},
    	vue_pay_ddtypeList:[],  //支付方式
    	vue_pay_ddtypeText:'',  //支付方式
    	vue_goods_pic:[{src:require('../../assets/img/1.jpg')},{src:require('../../assets/img/2.jpg')},{src:require('../../assets/img/3.jpg')}],  //goods的图片
    	vue_remark_text:'',
    	vue_goods_dataCartGoodsCodeStr:'',
    	vue_address_showAdd:true
    }
  },
  filters:{
  	phone:function(val){
  		if(val){
  			return val.replace(val.substring(3,7),'****')
  		}
  	}
  },
  computed:{
  	countPric:function(){  //统计总价
  		return this.vue_goods_dataList.reduce((previousValue,currentValue)=>{
  			return previousValue + (parseFloat(currentValue.goodsBuyPrice)*parseFloat(currentValue.goodsBuyNum))
  		},0)
  	},
  	countFavourablePric:function(){  //统计总的优惠
  		return this.vue_goods_dataList.reduce((previousValue,currentValue)=>{
  			return previousValue + currentValue.discountPrice
  		},0)
  	},
  	countNum:function(){  //统计件数
  		return this.vue_goods_dataList.reduce((previousValue,currentValue)=>{
  			return previousValue + currentValue.goodsBuyNum
  		},0)
  	},
  	finalCountPric:function(){  //统计实际总额
  		return this.countPric + this.countFavourablePric;
  	},

  },
  methods:{
  	query_address(memberCode){  //获取地址
  		if(!localStorage.getItem('delivery')){
  			this.axios({
	  			method:"PATCH",
	  			url:"/v3/basic/members/queryDefaultDelivery",
	  			data:{}
	  		}).then((res)=>{
	  			if(res.data==='操作成功'){
	  				this.vue_address_showAdd=true;
	  			}else{
	  				this.vue_address_showAdd=false;
	  				this.vue_address_data = res.data;
	  				this.vue_address_data = res.data;
	  				this.vue_address_data.deliveryDefault='1';
	  			}
	  		})
  		}else{
  			this.vue_address_showAdd=false;
  			this.vue_address_data=JSON.parse(localStorage.getItem('delivery'))
  		}

  	},
  	query_pay(ddtypeCode){  //获取支付方式
  		this.axios({
  			method:"POST",
  			url:"/v3/system/ddlists/"+ddtypeCode+"/listAll",
  			data:{}
  		}).then((res)=>{
  			this.vue_pay_ddtype=res.data.list;
  			if(this.$route.query.ddlistCode){
  				this.vue_pay_ddtype.forEach((item,index,arr)=>{
	  				if(item.ddlistCode==this.$route.query.ddlistCode){
	  					this.vue_pay_ddtypeText=item.ddlistName;
	  					return;
	  				}
	  			})
  			}else{
  				this.vue_pay_ddtype.forEach((item,index,arr)=>{
	  				if(item.ddlistDefault=='1'){
	  					this.vue_pay_ddtypeText=item.ddlistName;
	  					return;
	  				}
	  			})
  			}
  		})
  	},
  	query_invoice(){  //获取开票方式
  		if(localStorage.getItem('invoice')){
  			this.vue_invoice_data=JSON.parse(localStorage.getItem('invoice'));
  			if(this.vue_invoice_data.invoiceType==='2'){
  				this.vue_invoice_data.invoiceTypeName='普通发票';
  			}else if(this.vue_invoice_data.invoiceType==='3'){
  				this.vue_invoice_data.invoiceTypeName='增值税发票';
  			}
  		}else{
  				this.vue_invoice_data.invoiceTypeName='不开发票';
  			}
  	},
  	vFun_order_save(){
  		if(this.vue_address_showAdd){
  			Toast({
				  message: "请填写地址",
				  iconClass: 'fontSize iconfont icon-shibai'
				});
  		}else{
	  		this.axios({
	  			method:"POST",
	  			url:"/v3/sale/orders/"+this.vue_goods_dataCartGoodsCodeStr+"/saveByCartGoods",
	  			data:{
	  				"deliveryCode":this.vue_address_data.deliveryCode,  // 收货地址code
	  				"deliverySummary":this.vue_address_data.deliveryArea+this.vue_address_data.deliveryAddress,  // 收货详细地址
	  				"orderPayMode":this.$route.query.ddlistCode||'1',  //支付方式
	  				"deliveryWay":'0',  //配送方式
	  				"invoiceType":this.vue_invoice_data.invoiceType,  //发票类型
	  				"invoiceCode":this.vue_invoice_data.invoiceCode,  //发票code
	  				"invoiceTitle":this.vue_invoice_data.invoiceTitle,  //发票抬头
	  				"invoiceContent":this.vue_invoice_data.invoiceContent,  //发票内容
	  				"invoiceTaxId":this.vue_invoice_data.invoiceTaxId,  //发票纳税人识别号
	  				"invoiceAddress":this.vue_invoice_data.invoiceAddress,  //发票地址
	  				"invoicePhone":this.vue_invoice_data.invoicePhone,  //发票电话
	  				"invoiceBank":this.vue_invoice_data.invoiceBank,  //发票开户银行
	  				"invoiceAccount":this.vue_invoice_data.invoiceAccount,  //发票开户账号
	  				"orderBuyRemark":this.vue_remark_text  //买家备注
	  			}
	  		}).then((res)=>{
	   			this.$router.push({path:'/orderPay'});
	  			localStorage.setItem('orderCode',res.data.orderCode);
	  			localStorage.removeItem('delivery');  //提交订单成功后，删除选择的地址，以保证下次订单的地址为默认地址
	  			localStorage.removeItem('invoice');  //提交订单成功后，删除选择的发票
	  			localStorage.removeItem('invoiceType');  //提交订单成功后，删除选择的发票类型
	  		}).catch((err)=>{
	  			Toast({
					  message: err.response.data,
					  iconClass: 'fontSize iconfont icon-shibai'
					});
	  		})
  		}
  	}
  },
  created(){
  },
  mounted(){

  },
  activated(){
  	document.querySelector('#vue_id_title').innerHTML="订单填写";
  	this.vue_goods_dataList=JSON.parse(localStorage.getItem('select_goods'));  //获取从购物车上选择的商品
  	this.vue_goods_dataCartGoodsCodeStr = '';
  	this.vue_goods_dataList.forEach((item,index,arr)=>{
  		if(index==arr.length-1){
  			this.vue_goods_dataCartGoodsCodeStr+=item.cartGoodsCode;
  		}else{
  			this.vue_goods_dataCartGoodsCodeStr+=item.cartGoodsCode+',';
  		}
  	})
  	this.query_address('00200000083');   //获取地址
  	this.query_pay('00100000044');  //获取支付方式
  	this.query_invoice();  //获取发票
  	if(this.$refs['bigImgUl']){  //当商品只有一件的时候，这个dom是不存在的，所以要判断一下
  		this.$refs['bigImgUl'].style.width=this.vue_goods_dataList.length*2.26+'rem';
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.inside_header{
		height:1.2rem;
	}
	.content{
		background:#D2D3D9;
		margin-bottom:1.33rem;
	}
	.rightIcon{
		position:relative;
	}
	.rightIcon .lookDetail{
		position:absolute;
		top:50%;
		right:0.4rem;
		font-size:14px;
		transform:translateY(-50%);
	}
	.contentDetail{
		width:9rem;
	}
	.address{
		width:100%;
		height:2.02rem;
		background:#fff;
		margin-bottom:0.26rem;
		border-bottom:1px solid #BBBBBB;
	}
	.address_con p:nth-of-type(1){
		height:1rem;
		line-height:1.3rem;
		font-size:0.4rem;
		font-weight:bold;
	}
	.address_con p:nth-of-type(2){
		height:.8rem;
		line-height:.8rem;
	}
	.address_con p{
		width:100%;
		height:1.01rem;
		line-height:1.01rem;
		text-indent:1.01rem;
		font-size:0.37rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	}
	.address_con p span.ico{
		position:relative;
		top:-2px;
		padding:1px;
		border:1px solid #E15543;
		color:#E15543;
		border-radius:2px;
		font-size:0.3rem;
	}
	.address_noList{
		width:10rem;
		height:2.02rem;
		line-height:2.02rem;
		text-align:left;
		font-size:.5rem;
		color:#b0b0b0;
	}
	.add_p{
		position:relative;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap !important;
	}
	.add_p::after{
		content:'';
		position:absolute;
		width:0.4rem;
		height:0.4rem;
		background: url('../../assets/img/address_icon.png') center center/cover no-repeat;
		top:50%;
		left:0.7rem;
		transform:translate(-50%,-50%);
	}
	.orderDetail{
		width:100%;
		background:#fff;
		border-top:1px solid #BBBBBB;
		margin-bottom:0.26rem;
	}
	.goods{
		width:100%;
		height:2.8rem;
		border-bottom:1px solid #BBBBBB;
		box-sizing:border-box;
	}
	.bigImgWrap{
		max-width:6.78rem;
		height:2.8rem;
		overflow-x:auto;
	}
	.goods ul {
		width:10rem;
		height:2rem;
		padding:0.4rem 0;
	}
	.goods li{
		width:2rem;
		height:2rem;
		margin-left:0.26rem;
		line-height:2rem;
	}
	.goods .goodsNum{
		width:auto;
		margin-right:0.8rem;
		height:2.8rem;
		line-height:2.8rem;
	}
	.pay,.transport{
		width:100%;
		height:1.33rem;
		line-height:1.33rem;
		border-bottom:1px solid #BBBBBB;
	}
	.pay>div,.transport>div,.invoice>div{
		padding-left:10px;
	}
	.invoice{
		width:100%;
		height:1.33rem;
		line-height:1.33rem;
		border-top:1px solid #BBBBBB;
		border-bottom:1px solid #BBBBBB;
		background:#fff;
		margin-bottom:0.26rem;
	}
	.remark{
		background:#fff;
		padding:0.4rem 0.4rem 0.4rem 10px;
		margin-bottom:0.26rem;
	}
	.remark .valueDiv{
		width:8rem;
	}
	.sum{
		width:100%;
		line-height:.8rem;
		background:#fff;
		padding:0.2rem 0.4rem 0.2rem 10px;
	}
	.footer{
		position:fixed;
		width:100%;
		height:1.4rem;
		left:0;
		bottom:0;
		line-height:1.4rem;
		border-top:1px solid #BBBBBB;
		background:#fff;
		font-size:16px;
	}
	.footer .massge{
		width:7rem;
		text-align:right;
		color:#D50B0A;
		padding-right:10px;
	}
	.footer .btn{
		width:3rem;
		text-align:center;
		color:#fff;
		background:#D50B0A;
	}
	.goodsOnly{
		width:100%;
		padding:0.4rem 10px;
	}
	.goodsOnly .img{
		width:1.86rem;
		height:1.86rem;
	}
	.goodsOnly .detail{
		width:7.5rem;
		height:1.86rem;
		line-height:0.46rem;
		overflow:hidden;
		padding-left:10px;
	}
	.goodsOnly .detail .title{
		width:100%;
		height:0.65rem;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.goodsOnly .detail .spe{
		width:100%;
		height:0.65rem;
		font-size:0.34rem;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color:#ccc;
	}
	.goodsOnly .detail .pri{
		width:100%;
		height:0.65rem;
		overflow:hidden;
		color:#D50B0A;
	}
</style>
